<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ONLYOFFICE 数据标签插入</title>
    <script src="http://172.21.129.73/web-apps/apps/api/documents/api.js"></script>
    <style>
        #container {
            display: flex;
            justify-content: space-between;
        }
        #left-panel, #right-panel {
            width: 48%;
        }
        #left-panel {
            border-right: 1px solid #ccc;
            padding: 10px;
        }
        #right-panel {
            height: 500px;
        }
        .tag-item {
            margin: 5px 0;
            padding: 8px;
            background-color: #f0f0f0;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="container">
    <!-- 左侧标签列表 -->
    <div id="left-panel">
        <h2>待添加标签</h2>
        <div id="tag-list">
            <!-- 数据标签列表 -->
            <div class="tag-item" data-tag="{ 乙方 }">{ 乙方 }</div>
            <div class="tag-item" data-tag="{ 甲方 }">{ 甲方 }</div>
            <div class="tag-item" data-tag="{ 日期 }">{ 日期 }</div>
            <div class="tag-item" data-tag="{ 合同编号 }">{ 合同编号 }</div>
        </div>

        <button onClick="handle()">插入内容</button>
    </div>

    <!-- 右侧文档编辑器 -->
    <div id="right-panel">
        <div id="editor"></div>
    </div>
</div>

<script>
let docEditor = null
let connector = null
document.addEventListener('DOMContentLoaded', function() {
    console.log('页面加载完成');

    // 初始化编辑器配置
    const editorConfig = {
        width: "100%",
        height: "500px",
        type: "desktop",
        document: {
            title: "示例文档",
            url: "http://172.21.129.73:3001/docs/sample.docx", // 替换为您的文档 URL
            fileType: "docx"
        },
        editorConfig: {
            mode: "edit",
            callbackUrl: "http://172.21.129.73:3001/callback", // 替换为您的回调 URL
            events: {
                // 回调函数：编辑器加载完成
                onEditorReady: function() {
                    console.log('文档编辑器已准备就绪');
                }
            }
        }
    };

    // 初始化 ONLYOFFICE 编辑器
    docEditor = new DocsAPI.DocEditor("editor", editorConfig);

    connector = docEditor.createConnector();

    console.log('111', connector.callCommand, Asc)



    // 处理标签点击事件
    const tagList = document.getElementById('tag-list');
    if (tagList) {
        tagList.addEventListener('click', function(event) {
            console.log("标签被点击了");

            if (event.target && event.target.classList.contains('tag-item')) {
                const tag = event.target.getAttribute('data-tag');
                console.log('选中的标签:', tag); // 打印选中的标签
                insertTagIntoDocument(tag);
            }
        });
    } else {
        console.error("标签列表元素未找到！");
    }

    // 插入标签到编辑器中的光标位置
    function insertTagIntoDocument(tag) {
        console.log('插入标签:', tag);

        // 获取光标位置
        editor.getSelection(function(result) {
            if (result.error) {
                console.error('获取光标位置失败:', result.error);
            } else {
                const cursorPosition = result.data;
                console.log('光标位置:', cursorPosition);

                // 插入标签
                editor.insertTextAt(cursorPosition, tag, function(insertResult) {
                    if (insertResult.error) {
                        console.error('插入标签失败:', insertResult.error);
                    } else {
                        console.log('标签插入成功:', tag);
                    }
                });
            }
        });
    }
});

function handle() {
    const tableData = {
      rows: 3, // 表格行数
      columns: 3, // 表格列数
      style: 'Table Grid', // 表格样式
      cellData: [
        ['A1', 'B1', 'C1'], // 第一行数据
        ['A2', 'B2', 'C2'], // 第二行数据
        ['A3', 'B3', 'C3'], // 第三行数据
      ],
    };

    // console.log(docEditor.api, docEditor)

    // // 调用 OnlyOffice API 插入表格
    // docEditor.insertTable(tableData);
    console.log('222', connector.callCommand, Asc)
    Asc.scope.text = "Hello world!"; 
 
 connector.callCommand(function() {
     cosnole.log('Api', Api)
     var oDocument = Api.GetDocument();
     var oParagraph = Api.CreateParagraph();
     oParagraph.AddText(Asc.scope.text);
     oDocument.InsertContent([oParagraph]);

 }, function() { console.log("callback command"); });
}
</script>

</body>
</html>
